<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .base1 {
            width: 300px;
            height: 300px;
            border: 2px solid black;
        }

        .base2 {
            border: 2px solid red;
        }

        .base3 {
            color: pink;
            font-size: 20px;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
<!--
   javascript中事件类型
   1. 鼠标事件
      1.1  单击事件  onclick
      1.2  鼠标移入
      1.3 鼠标移出
      1.4 失去焦点
      1.5 鼠标移动
   2. 键盘事件
      2.1 按键按下
      2.2 按键弹起
-->

<div class="base1">
    鼠标移入和移出事件
</div>

<p>
    <input type="text" name="username" placeholder="请输入用户名">
    <span id="warning"></span>
</p>
<script>

    const colors = ['red', 'blue', 'pink', 'yellow', '#ff6700']

    let div = document.querySelector('div')
    // 鼠标移入
    div.onmouseenter = function () {
        div.classList.add('base2')
        div.classList.add('base3')
    }

    //鼠标的移出事件
    div.onmouseleave = function () {
        // 移出css样式
        div.classList.remove('base2')
    }

    // 鼠标移动事件
    div.onmousemove = function () {
        // 随机获取一个颜色   [0,colors.length-1]
        let randomIndex = Math.floor(Math.random() * colors.length)
        console.log(randomIndex)
        // 随机改变文字颜色
        div.style.color = colors[randomIndex]
    }


    // 表单绑定失去焦点事件  onblur   获取焦点  onfocus
    let element = document.querySelector('input[type="text"]')
    let span = document.querySelector('#warning')
    element.onblur = function () {
        let val = element.value.trim()
        if (val.length>=1 && val.length<=6){
            span.innerText = '用户名合法'
            span.style.color = 'green'
        }else{
            span.innerText = '用户名长度1-6位'
            span.style.color = 'red'
        }
    }

</script>

</body>
</html>
